<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive>
        <router-view
          v-if="$route.meta.keepAlive"
          class="router"
        />
      </keep-alive>
    </transition>
    <transition :name="transitionName">
      <router-view
        v-if="!$route.meta.keepAlive"
        class="router"
      />
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  computed: {
    transitionName () {
      return this.$store.state.direction
    }
  }
}
</script>
<style lang="less">
@import "~normalize.css/normalize.css";
@import "style/common.less";
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    // text-align: center;
    color: #2c3e50;
}
// #nav {
//     a {
//         font-weight: bold;
//         color: #2c3e50;
//         font-size: 32px;
//         &.router-link-exact-active {
//             color: $color-main;
//         }
//     }
// }
// h3 {
//     font-size: 18px;
// }
// a {
//     // font-size: 64px;
// }
.router{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  // width: 100%;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  // height: 100vh;
  // overflow: scroll;
  // position: fixed;
  // -webkit-overflow-scrolling: touch;
}
</style>
